<script lang="ts" >
import {
  reactive,
  ref,
  computed,
  defineComponent,
  getCurrentInstance,
} from "vue";
import { ElMessage, ElLoading } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { LoginForm, User } from "@api/model";
import { login, getCurrentUser, update } from "@api/user";
import { useStore } from "vuex";
import { captchaUrl, fileServiceUrl } from "@config";
import userFormR from "./hooks/userForm";
import { error, log } from "console";
// 图片剪辑上传组件
import ImgCutter from "@components/ImgCutter.vue";
const input = ref("");
// 从全局状态对象中获取用户信息
const store = useStore();
//const userForm = computed<User>(() => store.state.user);
export default defineComponent({
  name: "user",
  components: {
    ImgCutter,
  },
  setup() {
    return {
      ...userFormR(),
      fileServiceUrl
    };
  },
})

</script>

<template>
  <div class="userinfo" style="font-size: 18px">
    <!-- <h1 style=" margin-bottom: 50px;margin-left: 42%;">修改信息</h1> -->
    <!-- rules 配合 prop 实现数据校验 -->
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="rules"
      label-suffix=""
      label-width="100px"
    >
      <el-form-item  label="账号:" prop="username">
        <el-span v-text="userForm.username"></el-span>
      </el-form-item>

      <el-form-item label="头像:">
        <img-cutter
          :cut-width="70"
          :cut-height="70"
          :size-change="true"
          @cutDown="cutDown"
        >
          <template #open>
            <el-avatar :size="40" :src="fileServiceUrl+userForm.salt" />
          </template>
        </img-cutter>
      </el-form-item>

      <el-form-item label="密码:" prop="password">
        <el-input
          v-model="userForm.password"
          type="password"
          placeholder="Please input password"
          show-password
        />
      </el-form-item>

      <el-form-item label="昵称:" prop="nickName">
        <el-input v-model="userForm.nickName"></el-input>
      </el-form-item>

      <el-button
        type="primary"
        style="width: 70px; margin-left: 35%; margin-top: 30px"
        @click="submit"
        >提交</el-button
      >
      <el-button
        type="danger"
        style="width: 70px; margin-left: 5%; margin-top: 30px"
        @click="visible = false"
        >取消</el-button
      >
    </el-form>
  </div>
</template>

<style scoped>
.userinfo {
  margin-top: 50px;
  width: 60%;
  margin-left: 20%;
  font-size: 18px;
}
</style>